<template>
  <div>
    <div id="homePage" v-if="$route.name === 'homePage'">
      <!-- 轮播图 -->
      <el-carousel :interval="5000" arrow="always" height="100%">
        <el-carousel-item>
          <img src="../assets/img/index/首页banner-01.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/index/首页banner-02.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/index/首页banner-03.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
      <div class="content">
        <!-- 产品与方案 -->
        <div class="pro-and-sol">
          <div class="width">
            <h2>产品与方案</h2>
            <div class="line"></div>
            <div class="pro-and-sol-list">
              <div>
                <p>外语语言运用能力训练平台</p>
              </div>
              <div>
                <p>外语专业实践能力提升平台</p>
              </div>
              <div>
                <p>外语智慧教学资源库平台</p>
              </div>
              <div>
                <p>外语教学大数据智能分析平台</p>
              </div>
              <div>
                <p>外语虚拟仿真智慧实验教学平台</p>
              </div>
              <div>
                <p>外语创新教学平台</p>
              </div>
            </div>
            <button class="button hand-cursor" @click="$emit('menuSelect','productsAndSolutions')">查看更多 >></button>
          </div>
        </div>
        <!-- 服务 -->
        <div class="service">
          <div class="width">
            <h2>服务</h2>
            <div class="line"></div>
            <div class="service-list">
              <el-card class="box-card">
                <i class="icon iconfont icon-leijishufuwux"></i>
                <p>技术服务</p>
                <el-divider></el-divider>
                <button class="button hand-cursor" @click="$emit('menuSelect','service')">查看更多 >></button>
              </el-card>
              <el-card class="box-card">
                <i class="icon iconfont icon-wuliaoshiyongshenqingdan"></i>
                <p>试用申请</p>
                <el-divider></el-divider>
                <button class="button hand-cursor" @click="$emit('menuSelect','service')">查看更多 >></button>
              </el-card>
            </div>
          </div>
        </div>
        <!-- 关于我们 -->
        <div class="aboutUs">
          <div class="width">
            <div>
              <h2>关于我们</h2>
              <div class="line" style="border: #fff 4px solid;"></div>
            </div>
          </div>
        </div>
        <!-- 公司介绍 -->
        <div class="intro">
          <div class="width">
            <h2>公司介绍</h2>
            <div class="text">
              <p>
                中语智汇科技（厦门）有限公司作为一家新兴的智能互联网教育企业，依托云计算、人工智能、大数据、虚拟现实等新一代信息技术，建设开放、多元、智能、共享的智慧教育云平台，提供APP教学应用、智慧教学资源建设、虚拟仿真实验教学平台、教学大数据智能分析等教学服务，致力推动信息技术与新文科、新商科教育的深度创新融合，努力成为优秀的教育云服务、教育大数据领军企业！
              </p>
            </div>
            <div class='img'>
              <img src="../assets/img/index/公司简介1.png" alt="">
              <img src="../assets/img/index/公司简介2.png" alt="">
            </div>
          </div>
        </div>
        <!-- 新闻中心 -->
        <div class="press-center">
          <div class="width">
            <h2>新闻中心</h2>
            <div>
              <ul class="press-center-list">
                <li @click="$router.push({name:'newsInfo26'})" class="hand-cursor">
                  <div>
                    <p>首届“中语杯”全国高校互联网+英语教学大赛的通知</p>
                    <p>为贯彻落实《中共中央国务院关于全面深化新时代教师队伍建设改革的意见》和《关于加快建设高水平本科教育全面提高人才培养能力的意见...</p>
                  </div>
                </li>
                <li @click="$router.push({name:'newsInfo22'})" class="hand-cursor">
                  <div>
                    <p>外国语学院积极联合中语智汇科技（厦门）企业开展商务单证实训</p>
                    <p>为了更有成效地开展商务英语教学，充分发挥企业的技术优势，外国语学院积极拓展校外资源，积极与厦门的中语智汇科技（厦门）有限公司...</p>
                  </div>
                </li>
                <li @click="$router.push({name:'newsInfo23'})" class="hand-cursor">
                  <div>
                    <p>福建商学院 ¦ 我院与中语智汇科技（厦门）有限公司签署合作协议</p>
                    <p>为深化校企资源共享，促进产学研相结合，培养学生实践能力，提高人才培养质量，11月13日下午，中语智汇科技（厦门）有限公司总经理叶麟先生...</p>
                  </div>
                </li>
                <li @click="$router.push({name:'newsInfo24'})" class="hand-cursor">
                  <div>
                    <p>外国语学院通过企业云端实训推进校企协同育人</p>
                    <p>为拓宽外国语学院商务英语专业就业渠道，提升专业实践能力，推动产教融合、创新协同育人手段，商务英语系专业精心部署和多方联络，在资源...</p>
                  </div>
                </li>
              </ul>
              <div class="press-center-img">
                <img src="../assets/img/index/新闻中心2.png" alt="">
              </div>
            </div>
            <button class="button hand-cursor" @click="$router.push({name:'newsList'})">查看更多 >></button>
          </div>
        </div>
        <!-- 联系我们 -->
        <div>
          <div class="width">
            <h2>联系我们</h2>
            <div class="about-us">
              <img src="../assets/img/index/公司地址.png" alt="" width="550px" height="300px">
<!--              <bmap></bmap>-->
              <div class="text">
                <h3>中语智汇科技（厦门）有限公司</h3>
                <h6>Zhongyuzhihui Technology (Xiamen) Co., Ltd.</h6>
                <p>地址：厦门市软件园二期望海路19号302单元</p>
                <p>电话 : 0592-5967875   400-0592-528</p>
                <p>邮箱：zyamoy@aliyun.com</p>
                <p>网站 : http://www.zyamoy.com</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view v-else/>
  </div>

</template>

<script>
// import Bmap from '../components/BMap'
export default {
  name: 'homePage',
  components: {
    // Bmap
  },
  data () {
    return {
    }
  }
}
</script>
<style scoped lang="scss">
#homePage{
  .el-carousel{
    height: 700px;
    .el-carousel__container{
      height:100%;
      .el-carousel__item{
        img{
          width: 100%;
          height: 100%;
        }
      }
      .el-carousel__arrow{
        margin: 0 300px;
      }
      .el-carousel__arrow--left{
        left: 100px!important;
      }
    }
  }
  @media all and (max-width: 750px) {
    .el-carousel{
      height: 400px;
    }
  }
  .content{
    text-align: center;
    >div{
      padding: 80px 0;
    }
    h2{
      font-size: 26px;
    }
    .line{
      width: 100px;
      height: 0px;
      border: #0F5BFC 4px solid;
      border-radius: 4px;
      margin: 25px auto;
    }
    .pro-and-sol{
      .pro-and-sol-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        >div{
          width: 315px;
          height: 200px;
          margin: 12px 0;
          background-size: 100% 100%;
          line-height: 200px;
          text-align: center;
          color: #fff;
          font-weight: 400;
          font-size: 18px;
        }
        >div:nth-child(1){
          background-image: url(../assets/img/index/外语语言运用能力训练平台-小图.png);
        }
        >div:nth-child(2){
          background-image: url(../assets/img/index/外语专业实践能力提升平台-小图.png);
        }
        >div:nth-child(3){
          background-image: url(../assets/img/index/外语智慧教学资源库平台-小图.png);
        }
        >div:nth-child(4){
          background-image: url(../assets/img/index/外语教学大数据智能分析平台-小图.png);
        }
        >div:nth-child(5){
          background-image: url(../assets/img/index/外语虚拟仿真实验平台-小图.png);
        }
        >div:nth-child(6){
          background-image: url(../assets/img/index/外语创新教学平台-小图.png);
        }
      }
      .button{
        margin-top: 40px;
        width: 200px;
        height: 40px;
        border: 0px;
        background: #0F5BFC;
        color: #fff;
      }
    }
    .service{
      background: #eee;
      .service-list{
        display: flex;
        justify-content: space-between;
        >.box-card{
          width: 480px;
          height: 250px;
          border: 1px ;
        }
        >div:nth-child(1){
          background-color: #0F5BFC;
          i{
            font-size: 60px;
            color: #fff;
            line-height: 80px;
          }
          p{
            font-size: 18px;
            color: #fff;
            line-height: 30px;
          }
          .button{
            margin-top: 4px;
            width: 200px;
            height: 40px;
            border: 0px;
            background: #fff;
            color: #0F5BFC;
          }
        }
        >div:nth-child(2){
          i{
            font-size: 60px;
            color: #0F5BFC;
            line-height: 80px;
          }
          p{
            font-size: 18px;
            color: #000;
            line-height: 30px;
          }
          .button{
            margin-top: 4px;
            width: 200px;
            height: 40px;
            border: 0px;
            background: #0F5BFC;
            color: #fff;
          }
        }
      }

    }
    .aboutUs{
      width: 100%;
      height: 300px;
      background-image: url(../assets/img/index/关于我们.png);
      background-size: 100% 100%;
      >div>div{
        margin: 120px 0
      }
      h2{
        color: #fff;
      }
    }
    @media all and (max-width: 750px) {
      .aboutUs{
        height: 200px;
        >div>div{
          margin: 80px 0
        }
      }
    }
    .intro{
      .text{
        width: 85%;
        margin: 40px auto;
        p{
          text-align: start;
          font-size: 16px;
          line-height: 22px;
          text-indent: 2em
        }
      }
      .img{
        width: 70%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        img{
          width: 48%;
          height: auto;
        }
      }
    }
    .press-center{
      background: #eee;
      >div>div{
        margin: 30px 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 400px;
        .press-center-list{
          width: 50%;
          display: flex;
          flex-direction: column;
          li{
            width: 100%;
            border: #dcdcdc 1px solid;
            height: 25%;
            list-style: none;
            display: flex;
            // img{
            //   width: 70px;
            //   height: 70px;
            //   margin: auto 20px;
            // }
            div{
              margin: auto 30px auto 10px;
              width: auto;
              p:nth-child(1){
                width: auto;
                text-align: start;
                font-size: 16px;
                font-weight: 900;
                line-height: 40px;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;//CSS3属性
              }
              p:nth-child(2){
                text-align: start;
                font-size: 12px;
                line-height: 16px;
                display: block;
                // white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;//CSS3属性
              }

            }
          }
          li:nth-child(2n-1){
            background: #fff;
          }
        }
        .press-center-img{
          width: 50%;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .button{
        margin-top: 40px;
        width: 200px;
        height: 40px;
        border: 0px;
        background: #0F5BFC;
        color: #fff;
      }
    }
    .about-us{
      display: flex;
      margin: 40px 0 20px;
      .text{
        text-align: start;
        padding: 30px 0 0 40px;
        h3{
          font-size: 18px;
          line-height: 60px;
        }
        h6{
          font-size: 16px;
          line-height: 40px;
        }
        p{
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }
  .width{
    width:1000px;
    margin: 0 auto;
  }
  @media all and (max-width: 750px) {
    .width{
      width:960px;
      margin: 0 auto;
    }
  }
}
</style>
